<!--
 * @Author: houmin 745762351@qq.com
 * @Date: 2023-11-29 10:06:07
 * @LastEditors: houmin 745762351@qq.com
 * @LastEditTime: 2023-12-02 21:25:24
 * @FilePath: \tch-h5\src\views\order\components\Tab.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import {reactive, ref, defineEmits} from "vue"

const props = defineProps({
   list:[]

})
console.log(props.list)
const emit = defineEmits(['changeTab'])

const tabId = ref(props.list[0].id)
const tabClick = (item) => {

  if(tabId.value !== item.id) {
    tabId.value = item.id
    emit('changeTab', item.id)
  }
}
</script>

<template>
  <ul class="tab_list">
    <li
      v-for="item in list"
      class="list"
      :class="{'list_active' : tabId === item.id}"
      :key="item.id"
      @click="tabClick(item)"
    >
      {{item.name}}
      <div class="line" v-if="tabId === item.id"></div>
    </li>
  </ul>
</template>

<style scoped lang="scss">
.tab_list{
  display: flex;
  justify-content: space-around;
  height: 5rem;
  .list{
    margin-top: 2rem;
    color: #999999;
    font-size: 1.4rem;
    margin-bottom: .2rem;
  }
  .list_active{
    color: #333333;
    font-weight: bold;
  }
  .line{
    height: .6rem;
    background: linear-gradient(90deg, #4FAC91 0%, #ECE3AA 83%);
    border-radius: .3rem;
  }
}
</style>